<script setup lang="ts">
import VDialog from "@/components/VDialog/VDialog.vue";
import { computed, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { PaginationProps } from "@pureadmin/table";
import type { TableColumns } from "@pureadmin/table";
import {
  getSubmissionExportFilesApi,
  type SubmissionExportFileDTO,
  type SysFileQuery
} from "@/api/performance/submission";
import dayjs from "dayjs";
import Download from "@iconify-icons/ep/download";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

interface Props {
  modelValue: boolean;
}

const props = defineProps<Props>();
const emits = defineEmits<{
  (e: "update:modelValue", v: boolean): void;
}>();

const visible = computed({
  get: () => props.modelValue,
  set(v) {
    emits("update:modelValue", v);
  }
});

const tableRef = ref();
const loading = ref(false);
const dataList = ref<SubmissionExportFileDTO[]>([]);

const pagination: PaginationProps = {
  total: 0,
  pageSize: 10,
  currentPage: 1,
  background: true
};

// 表格列配置
const columns: TableColumns[] = [
  {
    label: "文件名",
    prop: "fileName",
    minWidth: 300
  },
  {
    label: "创建时间",
    prop: "createTime",
    minWidth: 180,
    formatter: ({ createTime }) =>
      createTime ? dayjs(createTime).format("YYYY-MM-DD HH:mm:ss") : "-"
  },
  {
    label: "数据数量",
    prop: "dataCount",
    minWidth: 100,
    formatter: ({ dataCount }) => (dataCount !== undefined ? dataCount : "-")
  },
  {
    label: "操作",
    fixed: "right",
    width: 120,
    slot: "operation"
  }
];

// 获取文件列表
async function getFileList() {
  loading.value = true;
  try {
    const query: SysFileQuery = {
      bizType: "performance_submission_export",
      pageSize: pagination.pageSize,
      currentPage: pagination.currentPage
    };
    const { data } = await getSubmissionExportFilesApi(query);
    dataList.value = data.rows || [];
    pagination.total = data.total || 0;
  } catch (error) {
    console.error("获取文件列表失败:", error);
    ElMessage.error("获取文件列表失败");
  } finally {
    loading.value = false;
  }
}

// 下载文件
function handleDownload(row: SubmissionExportFileDTO) {
  if (!row.url) {
    ElMessage.warning("文件链接不存在");
    return;
  }
  // 直接打开文件链接进行下载
  window.open(row.url, "_blank");
}

// 监听弹窗显示状态，当弹窗打开时获取文件列表
watch(
  () => visible.value,
  (val) => {
    if (val) {
      // 重置分页到第一页
      pagination.currentPage = 1;
      getFileList();
    }
  }
);
</script>

<template>
  <v-dialog
    title="下载文件"
    v-model="visible"
    :loading="loading"
    @cancel="visible = false"
    class="submission-export-files-modal"
    width="800px"
    :hidden-footer="true"
  >
    <div style="margin-top: 20px;">
      <pure-table
        border
        ref="tableRef"
        align-whole="center"
        showOverflowTooltip
        table-layout="auto"
        :loading="loading"
        :data="dataList"
        :columns="columns"
        :pagination="pagination"
        @page-size-change="getFileList"
        @page-current-change="getFileList"
      >
        <template #operation="{ row }">
          <el-button
            class="reset-margin"
            link
            type="primary"
            :icon="useRenderIcon(Download)"
            @click="handleDownload(row)"
          >
            下载
          </el-button>
        </template>
      </pure-table>
    </div>
  </v-dialog>
</template>

<style scoped lang="scss">
.submission-export-files-modal {
  :deep(.el-dialog__body) {
    padding: 20px;
  }
}
</style>

